<template>
	<view class="page">
		<free-nav-bar title="加入群聊" showBack :showRight="false"></free-nav-bar>
		
		<view class="p-5">
			<view class="bg-white rounded p-4">
				<view class="flex align-center">
					<free-avater :src="detail.avatar || '/static/images/demo/demo6.jpg'"></free-avater>
					<view class="pl-4 flex flex-column">
						<text class="font-md">{{detail.name}}</text>
						<text class="font-sm text-muted">群成员数：{{detail.user_count}}</text>
					</view>
				</view>
			</view>
			<view class="mt-3 py-3 flex align-center justify-center main-gb-color" hover-class="main-gb-hover-color" @click="join">
				<text class="font-md text-white">加入群聊</text>
			</view>
		</view>
	</view>
</template>

<script>
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	import freeAvater from "@/components/free-ui/free-avater.vue"
	import { mapState } from 'vuex'
	import $C from '@/common/free-lib/config.js'
	import $H from '@/common/free-lib/request.js';
	export default {
		data() {
			return {
				detail:{
					id:0,
					name:'',
					avatar:'',
					user_count: 0
				}
			}
		},
		onLoad(e) {
			if(e.params){
				this.detail = JSON.parse(decodeURIComponent(e.params))
			}
		},
		methods: {
			join(){
				uni.showLoading()
				$H.post('/group/join',{
					id: parseInt(this.detail.id)
				}).then(res=>{
					uni.hideLoading()
					uni.showToast({
						title: '加入群聊成功',
						icon: 'none'
					});
					uni.navigateBack();
				}).catch(err=>{
					uni.hideLoading()
					uni.showToast({
						title: err,
						icon:"error"
					});
				})
			}
		},
		computed:{
			...mapState({
				user: state=>state.user.user
			}),
		},
		components:{
			freeNavBar,
			freeAvater
		}
	}
</script>

<style>

</style>
